<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>测试日历</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/mdui/0.4.2/css/mdui.min.css">
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">

<div class="mdui-container">
    <div class="mdui-row">
        <div class="mdui-col-xs-12">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-block" mdui-dialog="{target: '#example-3'}">日历选择器</button>
        </div>
    </div>
    <div class="mdui-row">
<!--        <div class="mdui-col-xs-12">-->
<!--            <div class="mdui-appbar">-->
<!--                <div class="mdui-toolbar mdui-color-theme">-->
<!--                    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">check</i></a>-->
<!--                    <a href="javascript:;" class="mdui-typo-headline">2019-12-15</a>-->
<!--                    <div class="mdui-toolbar-spacer"></div>-->
<!--                    <ul class="mdui-menu" id="example-1">-->
<!--                        <li class="mdui-menu-item">-->
<!--                            <a href="javascript:;" class="mdui-ripple">昨天</a>-->
<!--                        </li>-->
<!--                        <li class="mdui-menu-item">-->
<!--                            <a href="javascript:;">今天</a>-->
<!--                        </li>-->
<!--                        <li class="mdui-menu-item">-->
<!--                            <a href="javascript:;" class="mdui-ripple">明天</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                    <button mdui-menu="{target: '#example-1',align:'right'}" class="mdui-btn mdui-btn-icon mdui-m-r-0">-->
<!--                        <i class="mdui-icon material-icons">more_vert</i>-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="mdui-row-xs-7 mdui-m-t-2">-->
<!--                <div class="mdui-col mdui-text-center"> 日</div>-->
<!--                <div class="mdui-col mdui-text-center"> 一</div>-->
<!--                <div class="mdui-col mdui-text-center"> 二</div>-->
<!--                <div class="mdui-col mdui-text-center"> 三</div>-->
<!--                <div class="mdui-col mdui-text-center"> 四</div>-->
<!--                <div class="mdui-col mdui-text-center"> 五</div>-->
<!--                <div class="mdui-col mdui-text-center"> 六</div>-->
<!--            </div>-->
<!--            <div class="mdui-divider"></div>-->
<!--            <div id="date" class="mdui-row-xs-7">-->
<!--            </div>-->
<!--        </div>-->

        <div class="mdui-dialog" id="example-3">
            <div class="">
                <div class="mdui-appbar mdui-dialog-title">
                    <div class="mdui-toolbar mdui-color-theme">
                        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">check</i></a>
                        <a href="javascript:;" class="mdui-typo-headline">2019-12-15</a>
                        <div class="mdui-toolbar-spacer"></div>
                        <ul class="mdui-menu" id="example-1">
                            <li class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">昨天</a>
                            </li>
                            <li class="mdui-menu-item">
                                <a href="javascript:;">今天</a>
                            </li>
                            <li class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">明天</a>
                            </li>
                        </ul>
                        <button mdui-menu="{target: '#example-1',align:'right'}" class="mdui-btn mdui-btn-icon mdui-m-r-0">
                            <i class="mdui-icon material-icons">more_vert</i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="mdui-dialog-content">
                <div class="mdui-row-xs-7">
                    <div class="mdui-col mdui-text-center"> 日</div>
                    <div class="mdui-col mdui-text-center"> 一</div>
                    <div class="mdui-col mdui-text-center"> 二</div>
                    <div class="mdui-col mdui-text-center"> 三</div>
                    <div class="mdui-col mdui-text-center"> 四</div>
                    <div class="mdui-col mdui-text-center"> 五</div>
                    <div class="mdui-col mdui-text-center"> 六</div>
                </div>
                <div class="mdui-divider"></div>
                <div id="date" class="mdui-row-xs-7">
<!--                    <div class="mdui-col mdui-text-center">-->
<!--                        <a class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple"></a>-->
<!--                    </div>-->
<!--                    <div class="mdui-col mdui-text-center">-->
<!--                        <a class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple">1</a>-->
<!--                    </div>-->
<!--                    <div class="mdui-col mdui-text-center">-->
<!--                        <a class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple mdui-color-theme-accent">2</a>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/mdui/0.4.2/js/mdui.min.js"></script>
    <script src="https://gcunetworkcenter.gitee.io/self-cdn/cdn/jquery/v1.11.0/js/jquery.min.js"></script>
    <script type="text/javascript">
        var $$ = mdui.JQ;
        $$(function(){
            generateDate(new Date());
        });
        //生成日历
        function generateDate(date){
            let newMonth=parseInt(new Date(date).getMonth())+1;
            let newYear=parseInt(new Date(date).getFullYear());
            var firstday=new Date(newYear,newMonth-1,1);
            var lastday=new Date(newYear,newMonth,0);
            var div=$$('#date');

            var weekday=firstday.getDay();
            //生成前面的空白
            for(var i=0;i<weekday;i++)
            {
                div.append(generate(''));
            }
            //生成
            for(var i=firstday.getDate();i<=lastday.getDate();i++){
                div.append(generate(i));
            }
        }
        //生成一个
        function generate(number){
            return '<div class="mdui-col mdui-text-center mdui-m-t-2 mdui-m-b-2"><a class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple">'+number+'</a></div>';
        }
    </script>
</body>
</html>
